<template>
	<el-dialog v-model="dialogVisible" title="插件选择" :width="1135" destroy-on-close append-to-body
		@closed="$emit('closed')">

		<div class="sc-plugin-select">
			<div class="sc-plugin-select__left">
				<div class="sc-plugin-select__search">
					<el-input v-model="keyword" prefix-icon="el-icon-search" placeholder="搜索插件">
						<template #append>
							<el-button icon="el-icon-search" @click="search"></el-button>
						</template>
					</el-input>
				</div>
				<div class="sc-plugin-select__select">
					<div class="sc-plugin-select__tree" v-loading="showGrouploading">
						<el-scrollbar>
							<blCategoryTree hideDo api-url="system/plugin/market/category" @node-click="groupClick" />
						</el-scrollbar>
					</div>
					<div class="sc-plugin-select__user" v-loading="showUserloading">
						<scTable ref="tableRef" :apiObj="$API.system.pluginMarket.list" row-key="id" :stripe="false"
							:border="false" hideDo :height="560">
							<el-table-column align="left">
								<template #default="{row}">
									<pluginWrap></pluginWrap>
								</template>
							</el-table-column>
						</scTable>
					</div>
				</div>
			</div>
		</div>

		<template #footer>

		</template>
	</el-dialog>
</template>

<script>
	import config from "@/config/workflow";

	import pluginWrap from './pluginWrap.vue';

	export default {
		components: {
			pluginWrap
		},
		props: {
			modelValue: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				callback: null,
				groupProps: config.group.props,
				userProps: config.user.props,
				roleProps: config.role.props,

				titleMap: ['插件选择', '角色选择'],
				dialogVisible: false,
				showGrouploading: false,
				showUserloading: false,
				keyword: '',
				groupId: '',
				pageSize: config.user.pageSize,
				total: 0,
				currentPage: 1,
				group: [],
				user: [],
				role: [],
				type: 1,
				selected: [],
				value: []
			}
		},
		computed: {
			selectedIds() {
				return this.selected.map(t => t.id)
			}
		},
		mounted() {

		},
		methods: {
			//打开赋值
			open(type, cb) {
				this.type = type
				this.value = []
				this.selected = []
				this.dialogVisible = true
				if (cb) {
					this.callback = cb;
				}
			},
			selectPluginFun(e) {
				this.callback && this.callback(e);
				this.dialogVisible = false
			},
			//获取组织
			async getGroup() {
				this.showGrouploading = true;
				var res = await config.group.apiObj.get();
				this.showGrouploading = false;
				var allNode = {
					[config.group.props.key]: '',
					[config.group.props.label]: '所有'
				}
				res.data.unshift(allNode);
				this.group = config.group.parseData(res).rows
			},
			//获取用户
			async getUser() {
				this.showUserloading = true;
				var params = {
					[config.user.request.keyword]: this.keyword || null,
					[config.user.request.groupId]: this.groupId || null,
					[config.user.request.page]: this.currentPage,
					[config.user.request.pageSize]: this.pageSize
				}
				var res = await config.user.apiObj.get(params);
				this.showUserloading = false;
				this.user = config.user.parseData(res).rows;
				this.total = config.user.parseData(res).total || 0;
				this.$refs.userScrollbar.setScrollTop(0)
			},
			//获取角色
			async getRole() {
				this.showGrouploading = true;
				var res = await config.role.apiObj.get();
				this.showGrouploading = false;
				this.role = config.role.parseData(res).rows
			},
			//组织点击
			groupClick(data) {
				this.keyword = ''
				this.currentPage = 1
				this.groupId = data[config.group.props.key]
				this.getUser()
			},
			//用户点击
			userClick(data, checked) {
				if (checked) {
					this.selected.push({
						id: data[config.user.props.key],
						name: data[config.user.props.label]
					})
				} else {
					this.selected = this.selected.filter(item => item.id != data[config.user.props.key])
				}
			},
			//用户分页点击
			paginationChange() {
				this.getUser()
			},
			//用户搜索
			search() {
				this.groupId = ''
				this.$refs.groupTree.setCurrentKey(this.groupId)
				this.currentPage = 1
				this.getUser()
			},
			//删除已选
			deleteSelected(index) {
				this.selected.splice(index, 1);
				if (this.type == 1) {
					this.$refs.userTree.setCheckedKeys(this.selectedIds)
				} else if (this.type == 2) {
					this.$refs.groupTree.setCheckedKeys(this.selectedIds)
				}
			},
			//角色点击
			roleClick(data, checked) {
				if (checked) {
					this.selected.push({
						id: data[config.role.props.key],
						name: data[config.role.props.label]
					})
				} else {
					this.selected = this.selected.filter(item => item.id != data[config.role.props.key])
				}
			},
			//提交保存
			save() {
				this.value.splice(0, this.value.length);
				this.selected.map(item => {
					this.value.push(item)
				})
				this.dialogVisible = false
			}
		}
	}
</script>

<style scoped>
	.sc-plugin-select {
		display: flex;
	}

	.sc-plugin-select__left {
		flex: 1;
		/*width: 400px;*/
	}

	.sc-plugin-select__right {
		flex: 1;
	}

	.sc-plugin-select__search {
		padding-bottom: 10px;
	}

	.sc-plugin-select__select {
		display: flex;
		border: 1px solid var(--el-border-color-light);
		background: var(--el-color-white);
	}

	.sc-plugin-select__tree {
		width: 250px;
		height: 480px;
		border-right: 1px solid var(--el-border-color-light);
	}

	.sc-plugin-select__user {

		flex: 1;
		/*		width: 200px;
		height: 300px;
*/
		display: flex;
		flex-direction: column;
	}

	.sc-plugin-select__user__list {
		flex: 1;
		overflow: auto;
	}

	.sc-plugin-select__user footer {
		height: 36px;
		padding-top: 5px;
		border-top: 1px solid var(--el-border-color-light);
	}

	.sc-plugin-select-role .sc-plugin-select__left {
		width: 200px;
	}

	.sc-plugin-select-role .sc-plugin-select__tree {
		border: none;
		height: 343px;
	}

	.sc-plugin-select-role .sc-plugin-select__selected {}

	[data-theme='dark'] .sc-plugin-select__selected li:hover {
		background: rgba(0, 0, 0, 0.2);
	}

	[data-theme='dark'] .sc-plugin-select__toicon i {
		background: #383838;
	}

	:deep(.el-table thead) {
		display: none !important;
	}

	:deep(.el-table__row) {
		background: #f2f4f8;
	}
</style>
